<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,maximum-scale=1.0">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="libs/swiper/swiper.min.css">
  <link rel="stylesheet" href="css/foreignsale.css">
  <title>海淘</title>
</head>

<body>
  <div class="container">
    <!-- 头部 -->
    <header>
      <div class="header">
        <span>海淘</span>
        <a class="forward" href="#"><img src="images/newsale/forward.png" alt=""></a>
      </div>
    </header>
    <!-- 导航 -->
    <nav>
      <div class="nav swiper-container">
        <ul class="swiper-wrapper">
          <li class="swiper-slide">
            <a href="#">
              <img src="images/foreignsale/nav01.png" alt="">
              <h3>日本馆</h3>
            </a>
          </li>
          <li class="swiper-slide">
            <a href="#">
              <img src="images/foreignsale/nav02.png" alt="">
              <h3>韩国馆</h3>
            </a>
          </li>
          <li class="swiper-slide">
            <a href="#">
              <img src="images/foreignsale/nav03.png" alt="">
              <h3>澳洲馆</h3>
            </a>
          </li>
          <li class="swiper-slide">
            <a href="#">
              <img src="images/foreignsale/nav04.png" alt="">
              <h3>欧美馆</h3>
            </a>
          </li>
          <li class="swiper-slide">
            <a href="#">
              <img src="images/foreignsale/nav05.png" alt="">
              <h3>东南亚</h3>
            </a>
          </li>
          <li class="swiper-slide">
            <a href="#">
              <img src="images/foreignsale/nav03.png" alt="">
              <h3>非洲馆</h3>
            </a>
          </li>
          <li class="swiper-slide">
            <a href="#">
              <img src="images/foreignsale/nav04.png" alt="">
              <h3>拉丁馆</h3>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- 分类 -->
    <section>
      <div class="category">
        <div class="title clearfix">
          <h3 class="fl">分类</h3>
          <a href="#" class="more fr">查看更多</a>
        </div>
        <div class="category_content">
          <ul>
            <li>
              <a href="#">
                <img src="images/foreignsale/category01.png" alt="">
                <h3>食品</h3>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/foreignsale/category02.png" alt="">
                <h3>护肤</h3>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/foreignsale/category03.png" alt="">
                <h3>个护</h3>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/foreignsale/category04.png" alt="">
                <h3>彩妆</h3>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 商品 -->
    <section>
      <div class="shopcontent">
        <ul>
          <li>
            <a href="#" class="clearfix">
              <img class="img fl" src="images/foreignsale/img01.png" alt="">
              <img class="country fl" src="images/foreignsale/country.png" alt="">
              <div class="shopinfo fl">
                <h3>
                  商品名称商品名称商品
                  名称商品名称
                </h3>
                <div class="pin"> 求拼团</div>
                <p class="had"> 已拼12.3万件 </p>
                <p class="price">￥85.0</p>
                <div class="shopinfo_footer">
                  <div class="open">团长开团</div>
                  <div class="hot">
                    <img src="images/foreignsale/hot.png" alt="">
                    <span class="hot_num">￥85.0</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="clearfix">
              <img class="img fl" src="images/foreignsale/img02.png" alt="">
              <img class="country fl" src="images/foreignsale/country.png" alt="">
              <div class="shopinfo fl">
                <h3>
                  商品名称商品名称商品
                  名称商品名称
                </h3>
                <div class="pin"> 求拼团</div>
                <p class="had"> 已拼12.3万件 </p>
                <p class="price">￥85.0</p>
                <div class="shopinfo_footer">
                  <div class="open">团长开团</div>
                  <div class="hot">
                    <img src="images/foreignsale/hot.png" alt="">
                    <span class="hot_num">￥85.0</span>
                  </div>
                </div>
              </div>
            </a>
          </li>

        </ul>
      </div>
    </section>
    <!-- 底部导航 -->
    <footer>
      <div class="footer_nav">
        <ul>
          <li>
            <a href="index.html">
              <em class="icon">&#xe613;</em>
              <h3>首页</h3>
            </a>
          </li>
          <li>
            <a href="newsale.html">
              <em class="icon">&#xe662;</em>
              <h3>上新</h3>
            </a>
          </li>
          <li>
            <a href="foreignsale.html">
              <em class="icon">&#xe60e;</em>
              <h3>海淘</h3>
            </a>
          </li>
          <li>
            <a href="search.html">
              <em class="icon">&#xe793;</em>
              <h3>搜索</h3>
            </a>
          </li>
          <li>
            <a href="personal.html">
              <em class="icon">&#xe60d;</em>
              <h3>个人中心</h3>
            </a>
          </li>
        </ul>
      </div>
    </footer>
  </div>
  <script src="libs/swiper/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 5,
      // spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    });
  </script>
</body>

</html>